<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  <style>
    body {
      margin: 0;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    ul li {
      list-style-type: none;

    }

    .history {
      display: block;
      width: 100vw;
    }

    .wrapper {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      background: #fff;
    }

    .History_1930-1979_01 {
      height: calc(1040 / 899 * 100vw);
      background: url("./images/History_1930-1979_01.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_02 {
      height: calc(940 / 899 * 100vw);
      background: url("./images/History_1930-1979_02.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_03 {
      height: calc(1150 / 899 * 100vw);
      background: url("./images/History_1930-1979_03.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_04 {
      height: calc(1090 / 899 * 100vw);
      background: url("./images/History_1930-1979_04.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_05 {
      height: calc(1140 / 899 * 100vw);
      background: url("./images/History_1930-1979_05.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_06 {
      height: calc(1150 / 899 * 100vw);
      background: url("./images/History_1930-1979_06.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_07 {
      height: calc(1080 / 899 * 100vw);
      background: url("./images/History_1930-1979_07.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_08 {
      height: calc(1125 / 899 * 100vw);
      background: url("./images/History_1930-1979_08.jpg") 0 0 / 100% no-repeat;
    }

    .History_1930-1979_09 {
      height: calc(485 / 899 * 100vw);
      background: url("./images/History_1930-1979_09.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_01 {
      height: calc(1059 / 900 * 100vw);
      background: url("./images/History_Timeline_01.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_02 {
      height: calc(1400 / 900 * 100vw);
      background: url("./images/History_Timeline_02.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_03 {
      height: calc(1240 / 900 * 100vw);
      background: url("./images/History_Timeline_03.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_04 {
      height: calc(1120 / 900 * 100vw);
      background: url("./images/History_Timeline_04.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_05 {
      height: calc(1280 / 900 * 100vw);
      background: url("./images/History_Timeline_05.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_06 {
      height: calc(1360 / 900 * 100vw);
      background: url("./images/History_Timeline_06.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_07 {
      height: calc(1500 / 900 * 100vw);
      background: url("./images/History_Timeline_07.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_08 {
      height: calc(1400 / 900 * 100vw);
      background: url("./images/History_Timeline_08.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_09 {
      height: calc(720 / 900 * 100vw);
      background: url("./images/History_Timeline_09.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_11 {
      height: calc(1100 / 900 * 100vw);
      background: url("./images/History_Timeline_11.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_12 {
      height: calc(1200 / 900 * 100vw);
      background: url("./images/History_Timeline_12.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_13 {
      height: calc(1200 / 900 * 100vw);
      background: url("./images/History_Timeline_13.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_14 {
      height: calc(1300 / 900 * 100vw);
      background: url("./images/History_Timeline_14.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_15 {
      height: calc(1300 / 900 * 100vw);
      background: url("./images/History_Timeline_15.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_16 {
      height: calc(1300 / 900 * 100vw);
      background: url("./images/History_Timeline_16.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_17 {
      height: calc(530 / 900 * 100vw);
      background: url("./images/History_Timeline_17.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_19 {
      height: calc(1100 / 900 * 100vw);
      background: url("./images/History_Timeline_19.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_20 {
      height: calc(1200 / 900 * 100vw);
      background: url("./images/History_Timeline_20.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_21 {
      height: calc(1300 / 900 * 100vw);
      background: url("./images/History_Timeline_21.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_22 {
      height: calc(1200 / 900 * 100vw);
      background: url("./images/History_Timeline_22.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_23 {
      height: calc(1300 / 900 * 100vw);
      background: url("./images/History_Timeline_23.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_24 {
      height: calc(1400 / 900 * 100vw);
      background: url("./images/History_Timeline_24.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_25 {
      height: calc(1200 / 900 * 100vw);
      background: url("./images/History_Timeline_25.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_26 {
      height: calc(1120 / 900 * 100vw);
      background: url("./images/History_Timeline_26.jpg") 0 0 / 100% no-repeat;
    }

    .History_Timeline_27 {
      height: calc(627 / 900 * 100vw);
      background: url("./images/History_Timeline_27.jpg") 0 0 / 100% no-repeat;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <ul class="content">
    <li>
      <div class="History_1930-1979_01"></div>
      <div class="History_1930-1979_02"></div>
      <div class="History_1930-1979_03"></div>
      <div class="History_1930-1979_04"></div>
      <div class="History_1930-1979_05"></div>
      <div class="History_1930-1979_06"></div>
      <div class="History_1930-1979_07"></div>
      <div class="History_1930-1979_08"></div>
      <div class="History_1930-1979_09"></div>
      <!--<img class="history" src="./images/History_1930-1979_01.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_02.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_03.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_04.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_05.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_06.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_07.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_08.jpg" alt="">-->
      <!--<img class="history" src="./images/History_1930-1979_09.jpg" alt="">-->
    </li>
    <li>
      <div class="History_Timeline_01"></div>
      <div class="History_Timeline_02"></div>
      <div class="History_Timeline_03"></div>
      <div class="History_Timeline_04"></div>
      <div class="History_Timeline_05"></div>
      <div class="History_Timeline_06"></div>
      <div class="History_Timeline_07"></div>
      <div class="History_Timeline_08"></div>
      <div class="History_Timeline_09"></div>
      <!--<img class="history" src="./images/History_Timeline_01.jpg" alt="">-->
      <!--<img class="history" src="./images/History_Timeline_02.jpg" alt="">-->
  <!--<img class="history" src="./images/History_Timeline_03.jpg" alt="">-->
  <!--<img class="history" src="./images/History_Timeline_04.jpg" alt="">-->
  <!--<img class="history" src="./images/History_Timeline_05.jpg" alt="">-->
  <!--<img class="history" src="./images/History_Timeline_06.jpg" alt="">-->
  <!--<img class="history" src="./images/History_Timeline_07.jpg" alt="">-->
  <!--<img class="history" src="./images/History_Timeline_08.jpg" alt="">-->
  <!--<img class="history" src="./images/History_Timeline_09.jpg" alt="">-->
  </li>
  <li>
    <div class="History_Timeline_11"></div>
    <div class="History_Timeline_12"></div>
    <div class="History_Timeline_13"></div>
    <div class="History_Timeline_14"></div>
    <div class="History_Timeline_15"></div>
    <div class="History_Timeline_16"></div>
    <div class="History_Timeline_17"></div>
    <!--<img class="history" src="./images/History_Timeline_11.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_12.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_13.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_14.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_15.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_16.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_17.jpg" alt="">-->
  </li>
  <li>
    <div class="History_Timeline_19"></div>
    <div class="History_Timeline_20"></div>
    <div class="History_Timeline_21"></div>
    <div class="History_Timeline_22"></div>
    <div class="History_Timeline_23"></div>
    <div class="History_Timeline_24"></div>
    <div class="History_Timeline_25"></div>
    <div class="History_Timeline_26"></div>
    <div class="History_Timeline_27"></div>
    <!--<img class="history" src="./images/History_Timeline_19.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_20.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_21.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_22.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_23.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_24.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_25.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_26.jpg" alt="">-->
    <!--<img class="history" src="./images/History_Timeline_27.jpg" alt="">-->
  </li>
  </ul>
</div>
<script src="./scripts/bscroll.min.js"></script>
<script>
  var curIndex = 0
    , heightList = []
    , height = 0;



  var content = document.querySelectorAll('.content li');
  var myBScroll = new BScroll('.wrapper', {probeType: 2});
  heightList.push(0);
  content = Array.prototype.slice.call(content);
  content.forEach(function (e) {
    height += e.clientHeight;
    heightList.push(height)
  });
  myBScroll.on('scroll', onScroll);

  function onScroll(o) {

    var y = -o.y;

    if (y < 0) {
      curIndex = 0;
      curIndexChange(curIndex);
      return
    }

    for (var i = 0; i < heightList.length - 1; i++) {
      var h1 = heightList[i],
        h2 = heightList[i + 1];
      if (y >= h1 && y < h2) {
        curIndex = i;
        curIndexChange(curIndex);
        return
      }
    }

    curIndex = heightList.length - 2;
    curIndexChange(curIndex);
  }

  function curIndexChange(index) {

    console.log(index)
  }



</script>
</body>
</html>
